<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        box-sizing: border-box;
      }

      .clock {
        width: 600px;
        height: 600px;
        background: url(./images/clock.jpg) no-repeat;
        margin: 50px auto 0;
        position: relative;
      }

      .hh,
      .mm,
      .ss {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: url(./images/hour.png) no-repeat center;
      }

      .mm {
        background-image: url(./images/minute.png);
        transform: rotate(270deg);
      }

      .ss {
        background-image: url(./images/second.png);
        transform: rotate(0deg);
      }
    </style>
  </head>
  <body>
    <div class="clock">
      <div class="hh" id="h"></div>
      <div class="mm" id="m"></div>
      <div class="ss" id="s"></div>
    </div>
  </body>
</html>
<script>
  // 需求 让s这个盒子每隔一秒转6度°
  // 先获取元素把
  const s = document.querySelector("#s");
  const m = document.querySelector("#m");
  const h = document.querySelector("#h");

  let du = 0;
  setInterval(function () {
    du += 6;
    // 设置盒子样式
    s.style.transform = `rotate(${du}deg)`;

    // console.log(s.style.transform);
    // console.log(new Date());  //当前时间
  }, 1000);
</script>
